
<#include "header.ftl">

<link rel="stylesheet" href="${Domain}common/cropper-master/dist/cropper.css">
<script src="${Domain}common/cropper-master/dist/cropper.js"></script>
<style>

    img {
      max-width: 100%;
    }
    /* Override Cropper's styles */
    .cropper-view-box,
    .cropper-face {
      border-radius: 50%;
    }
  </style>
  <!-- 内容区域 -->
<div class="tpl-content-wrapper">

   <div class="container-fluid am-cf">
                <div class="row">
                     <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                        <ol class="am-breadcrumb">
						  <li><a href="${Domain}my" class="am-icon-home">首页</a></li>
						  <li class="am-active">个人信息</li>
						  <li class="am-active">头像</li>
						</ol>
                    </div>
                  	<#include "../common/return.ftl">
                </div>
</div>
  <div class="row-content am-cf">
          <div class="row">

                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">个人头像</div>
                                
                            </div>
                            <div class="widget-body am-fr">

                                <form class="am-form tpl-form-line-form"  method="post"  action="${Domain}api/upload?action=uploadimage" enctype="multipart/form-data"  id="upload_form">
                                    <div class="am-form-group">
                                        <label  class="am-u-sm-12 am-u-md-3 am-form-label"> </label>
                                        <div class="am-u-sm-8 am-u-md-6">
                                           <div class="tngou-show"> ${user.name!} ${user.position!} </div>
                                        </div>
                                         <label  class="am-u-sm-1 am-u-md-3"></label>
                                    </div>

                                    <div class="am-form-group">
                                        <label  class="am-u-sm-12 am-u-md-3 am-form-label"> </label>
                                        <div class="am-u-sm-8 am-u-md-6">
                                          <img src="${Domain}${user.Avatar()}"   width="120px" >
                                          <img src="${Domain}${user.Avatar()}" class="am-circle" style="margin: 20px 0px 0px 20px"  width="100px" >
                                        </div>
                                         <label  class="am-u-sm-1 am-u-md-3"></label>
                                    </div>
									
                                	
                                    <div class="am-form-group">
                                        <div class="am-u-sm-6 am-u-sm-push-3">
                                          <div class="am-form-group am-form-file">
											  <button type="button" class="am-btn page-header-button tpl-btn-bg-color-success am-btn-block">
											    <i class="am-icon-camera"></i> 修改头像</button>
											  <input id="upload_file" name="upfile" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple>
											 </div>
                                            
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            
   </div>
</div>        

<div class="am-modal " tabindex="-1" id="my-confirm">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">图片剪切
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd">

    <div >
      <img id="image" src="${Domain}${user.Avatar()}" alt="Picture">
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" onclick="save()">确定</span>
    </div>  
  </div>
      
   
  </div>
</div>

  <script type="text/javascript">
   var loading ;
  function getRoundedCanvas(sourceCanvas) {
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      var width = sourceCanvas.width;
      var height = sourceCanvas.height;	  
      canvas.width = width;
      canvas.height = height;
      context.beginPath();
      context.arc(width / 2, height / 2, Math.min(width, height), 0, 2 * Math.PI);
      context.strokeStyle = 'rgba(0,0,0,0)';
      context.stroke();
      context.clip();
      context.drawImage(sourceCanvas, 0, 0, width, height);

      return canvas;
    }

    function save()
    {
    	var $image = $('#image');
    	 var croppedCanvas;
         var roundedCanvas;
         croppedCanvas = $image.cropper('getCroppedCanvas');
         roundedCanvas = getRoundedCanvas(croppedCanvas);
         imgbase64=roundedCanvas.toDataURL();
         loading =weui.loading('数据加载中...'); 
         $.post("${Domain}api/user/saveavatar", { imgurl: $image.attr("src"), imgbase64: imgbase64 },
		   function(json){
		      if(json.status)
		    	{
		    	  	if(loading)loading.hide();
		    		weui.toast(json.msg); 
		    		location.href="";		
		    	}else
		    	{	
		    		if(loading)loading.hide();
		    	    weui.alert(json.msg);  		 
		    	}
		   });
         
         
    }
    

   
    $('#upload_file').on('change', function () { 
    	  $("#upload_form").ajaxSubmit({
    	    beforeSubmit:function(){
    	    	loading =weui.loading('数据加载中...'); 
    	    },
    	    success: function(json) {
    	      
    	       if(json.state=="SUCCESS")
    	       {
    	    	   if(loading) loading.hide();
    	    	   var $image = $('#image');
    	    	   $image.attr("src",'${ImgUrl}'+json.url);
    	    	   $image.cropper({
    	    	        aspectRatio: 1,
    	    	        viewMode: 1,
    	    	        minContainerWidth: 380,
    	    	        minContainerHeight: 240,
    	    	        ready: function () {
    	    	          croppable = true;
    	    	        }
    	    	   });
    	    	   $('#my-confirm').modal({
    	    		   closeViaDimmer: 0,
    	    		    width: 400});
    	         
    	       }else
    	       {
    	    	   if(loading) loading.hide();
   	    			weui.alert(json.state); 
    
    	       }
    	    }
    	  });

    	});
	</script>
<#include "footer.ftl">